<template>
  <div>
      <div>
          <div class="haeder-top">
              <!-- 小米logo -->
              <div class="haeder-img">
                  <img src="../../assets/img/header/icon-mi.png" alt="">
              </div>
              <!-- 搜索条 -->
              <div class="haeder-ss">
                  <img src="../../assets/img/header/icon-ss.png" alt="">
                  <div>搜索商品名称</div>
              </div>
              <!-- 登录按钮 -->
              <div class="haeder-me">
                  <img src="../../assets/img/header/icon-me.png" alt="">
              </div>
          </div>
          <div></div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
*{
    margin: 0;
    padding: 0;
}
/* 总区域 */
.haeder-top{
    display: flex;
    background-color: rgb(240, 240, 240);
    width: 100vw;
    height: 7vh;
    /* justify-content: space-between; */
}
/* 小米logo */
.haeder-img>img{
    width: 25px;
    height: 17.45px;
    padding: 10px 10px 5px 10px;
}
/* 搜索条 区域 */
.haeder-ss{
    width: 75vw;
    height: 5vh;
    background-color: white;
    margin:6px 4px 0 4px;
    display: flex;
}
/* 搜索条 文字 */
.haeder-ss>div{
    color: #aaa;
    padding: 3px 0 0 3px;
    font-size: 0.9em;
    margin: 2px 0 0 0 ;
}
/* 搜索条 图片 放大镜 */
.haeder-ss > img{
    width: 16.26px;
    height: 16.26px;
    padding: 5px 5px 0px 5px;
    margin: 2px 0 0 0 ;
}
/* 个人中心 图标 */
.haeder-me>img{
    width: 23.26px;
    height: 23.26px;
    padding: 5px;
    margin: 2px 0px 0 2px;
}
</style>